<template>
	<view class="tabs" :class="{'tab-end':(current > list.length-4) || !isScroll}">
		<u-tabs :list="list" :current="current" @change="change" inactive-color="#666666" :active-color="config.mainColor"
			:active-item-style="activeItemStyle" :is-scroll="isScroll" :fontSize="fontSize"></u-tabs>
	</view>
</template>

<script>
	export default {
		name: "bb-tabs",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			current: {
				type: [Number, String],
				default: 0
			},
			isScroll: {
				type: Boolean,
				default: true
			},
			fontSize: {
				type: [Number, String],
				default: 28
			}
		},
		data() {
			return {
				activeItemStyle: {
					color: "#333333"
				},
				config: this.$appConfig
			};
		},
		methods: {
			change(index) {
				this.$emit('change', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		width: 100%;
		position: relative;

		&:after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 100rpx;
			background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			z-index: 100;
			pointer-events: none
		}

		&.tab-end:after {
			background: none;
		}
	}
</style>